<template>
  <el-dialog :visible.sync="dialogVisible">
    <el-form :model="form">
      <el-form-item label="名称" label-width="100px">
        <el-input v-model="form.kwName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="代号" label-width="100px">
        <el-input v-model="form.kwCode" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" label-width="100px">
        <el-input v-model="form.kwAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" label-width="100px">
        <el-input v-model="form.kwTel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门" label-width="100px">
        <DepartmentSelector
          @departmentSelected="setDepartment"
          v-model="form.kwDepartment"
          ref="dptSelector"
        />
      </el-form-item>
      <el-form-item label="业务员" label-width="100px">
        <UserSelector @userSelected="setUser" v-model="form.kwSales" ref="usrSelector"/>
      </el-form-item>
    </el-form>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>搜索框</span>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="schClk">搜 索</el-button>
    </div>
  </el-dialog>
</template>
<script>
import DepartmentSelector from '@/components/Selector/DepartmentSelector.vue'
import UserSelector from '@/components/Selector/UserSelector.vue'

export default {
  components: {
    DepartmentSelector,
    UserSelector
  },
  data() {
    return {
      form: {
        kwName: '',
        kwCode: '',
        kwDepartment: null,
        kwSales: null,
        kwAddress: '',
        kwTel: ''
      },
      dialogVisible: false
    }
  },
  methods: {
    schClk() {
      this.dialogVisible = false
      this.$emit('searchBtnClick')
    },
    setDepartment(params) {},
    setUser(params) {}
  },
  mounted() {}
}
</script>
